<template>
	<view class="harder">
		<Adminheader></Adminheader>
		<view class="log-list w1060 container" v-for="(item,index) in LookWork" :key="item.name">
			<view class="page-hd">
				<h2 class="title">{{item.name}}</h2>
				<view class="meta">
					<view class="fl">
						<li class="fl">时薪：<span>{{item.price}}</span></li> 
						<li class="fl">每天最长工作时间：<span>{{item.working_hours}}/小时</span></li> 
						<li class="fl">人才：<span>{{item.apply_name}}</span></li>	
					</view>
					<view>
						<span v-if="!completedStatus" class="finishJob" @click="finishJob"><u-icon name="checkmark" class="checkmark"></u-icon>完成工作</span>
					</view>
					<view style="clear: both;"></view>
				</view>
			</view>
			<view class="stat">
				<view class="total">
					<view class="item fl">

						<p class="num">{{item.total_hours}} 小时</p> <p>总工作时长</p>
					</view>
					<view class="item fr">
						<p class="num">{{item.total_money}} 元</p> <p>总工作价值</p>
					</view>
				</view>
				<view class="item value">
					<view class="scale">
						<li class="b-green fl" style="width: 33%;"></li> 
						<li class="b-yellow fl" style="width: 33%;"></li> 
						<li class="b-red fl" style="width: 34%;"></li>
					</view>
					<view class="numerical">
						<li class="fl"><p class="num t-green">{{item.account_money}} 元</p> <p>已结算</p></li> 
						<li class="fl"><p class="num t-yellow">{{item.auth_money}} 元</p> <p>审核中</p></li> 
						<li class="fl"><p class="num t-red">{{item.uncommit_money}} 元</p> <p>未提交</p></li>
					</view>
					
				</view>
			</view>
		</view>
		<view class="tabs cl">
			<view class="fl ul table">
				<li v-for="(item,index) in facility" :key="item.id" :class="{active:index==currents}"  @click="clickTab(index,item.name)">{{item.name}}</li>
			</view>
			<view style="clear: both;"></view>
		</view>
		<view class="sj">
			 <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
			<view class="scsj fl" @click="tjsj">
				<i class="icon iconfont">&#xe76e;</i>添加时间
			</view>
			<view class="scsj" @tap="delet">
				<i class="icon iconfont" >&#xe60c;</i>删除时间
			</view>
			<view class="scsj fl" @click="jobStatus">
				<i class="el-icon-guide"></i>工作状态
			</view>
		</view>
		
	<view class="admin_main" v-for="(items,index) in LookWorkTime" :key="index">
		 <el-checkbox class="check" @change="handleCheckedCitiesChange(index,items,items.id)" v-model = "lang[index]"></el-checkbox>
			<view class="cens" style="width: 85%;">
				<view class="details">
					<view>
						<el-popover placement="top-start" width="300" trigger="manual">
							<div class="checkFieldAuditPolicy">{{items.work_desc}}</div>
							<span slot="reference">{{items.work_desc.substr(0, 6) + "..."}}</span>
						</el-popover>
					</view>
					<view class="viewDetails">
						<el-popover placement="top-end" width="300" trigger="click">
							<span class="tips-content">{{items.work_desc}}</span>
							<span slot="reference">查看详情</span>
						 </el-popover>
					</view>
				</view>
				<view class="jobTime">
					<view>工作时长：{{items.work_hours}}小时</view>
					<view>{{items.work_date}}</view>
				</view>
			</view>

		
	</view>
	<!-- 默认显示 -->
	<view class="admin_main" v-for="(items,index) in defaultData" :key="index" v-if="fang == false" >
		 <el-checkbox class="check" @change="handleCheckedCitiesChange(index,items,items.id)" v-model = "lang[index]"></el-checkbox>
		<view class="cens" style="width: 85%;">
			<view class="details">
				<view>
					<el-popover placement="top-start" width="300" trigger="manual">
						<div class="checkFieldAuditPolicy">{{items.work_desc}}</div>
						<span slot="reference">{{items.work_desc.substr(0, 6) + "..."}}</span>
					</el-popover>
				</view>
				<view class="viewDetails">
					<el-popover placement="top-end" width="300" trigger="click">
						<span class="tips-content">{{items.work_desc}}</span>
						<span slot="reference">查看详情</span>
					 </el-popover>
				</view>
			</view>
			<view class="jobTime">
				<view>工作时长：{{items.work_hours}}小时</view>
				<view>{{items.work_date}}</view>
			</view>
		</view>
		
	</view>
	
	<!-- 审核中状态 -->
	<view v-if="jobTimeStatus">
		<view class="admin_main" v-for="(items,index) in reviewData" :key="index" v-if="fang == false">
				<view class="cens" style="width: 100%;">
					
					<view class="details">
						<view>
							<el-popover placement="top-start" width="300" trigger="manual">
								<div class="checkFieldAuditPolicy">{{items.work_desc}}</div>
								<span slot="reference">{{items.work_desc.substr(0, 6) + "..."}}</span>
							</el-popover>
						</view>
						<span class="review" :class="[{'yelo':(items.statetxt == '审核中')},
						{'bule':(items.statetxt == '待结算')},{'green':(items.statetxt == '已结算')},
						{'red':(items.statetxt == '被驳回')}]">{{items.statetxt}}</span>
						<view class="viewDetails">
							<el-popover placement="top-end" width="300" trigger="click">
								<span class="tips-content">{{items.work_desc}}</span>
								<span slot="reference">查看详情</span>
							 </el-popover>
						</view>
					</view>
					<view class="jobTime">
						<view>工作时长：{{items.work_hours}}小时</view>
						<view>{{items.work_date}}</view>
					</view>
				</view>
				
			</view>
	</view>
		
		
		<view class="jsbutton">
			<button type="default" @click="sqjs" v-if="completedStatus==0">去 结 算</button>
			<button :disabled="true" class="btns" type="default" @click="sqjs" v-else>已 完 成</button>
		</view>
		
		<!-- 是否已完成的弹窗 -->
		<u-modal v-model="show"  width="100%" show-cancel-button
		:title="title" :title-style="{fontSize: '20px', fontWeight: 'bold'}"
		:confirm-text="Confirm" @confirm="confirm">
			<view class="modelContent">
				确认任务完成后，雇佣关系将正式结束，为保证您的资金安全，,
				建议您在确认为有未提交的工作时间,与为存在已提交企业未结算的工作时间后
				,再确认完成任务!
			</view>
		</u-modal>
		
		<!-- 内层弹窗 -->
		<u-modal v-model="coreShow"  width="100%" show-cancel-button
		:title="title" :title-style="{fontSize: '20px', fontWeight: 'bold'}"
		:show-confirm-button="confirmButton" @confirm="confirmTask" >
			<view class="modelContent" v-if="jobless">{{jobless}}<br/>
			请开始工作，企业完成审核结算后，您才能正常关闭任务。
			</view>
			<view class="modelContent" v-else-if="jobTimeless">{{jobTimeless}}<br/>
			请填写工作时间，企业完成审核结算后，您才能正常关闭任务。
			</view>
			<view class="modelContent" v-else-if="jobTimeSubit">{{jobTimeSubit}}<br/>
			请提交工作时间，企业完成审核结算后，您才能正常关闭任务。
			</view>
			<view class="modelContent" v-else-if="noAcceptance">{{noAcceptance}}<br/>
			请联系后耐心等待企业验收结算后，您才能正常关闭任务。
			</view>
			<view class="modelContent" v-else-if="ConfirmLose">{{ConfirmLose}}</view>
			<view class="modelContent" v-else-if="completed">{{completed}}</view>
		</u-modal>
	</view>
</template>

<script>
	import Adminheader from '../admin_header/admin_header.vue'
	export default {
		data() {
			return {
				jobTimeStatus:false,
				confirmButton:false,//确认按钮
				coreShow:false,
				Confirm:'完成任务',//确认按钮内容
				title:`您是否确认该任务已完成？`,//标题内容
				show: false,
				lang:[],
				checkAll: false,
				isIndeterminate: true,
				currents:0,
				LookWork:[],
				LookWorkTime:[],
				defaultData:[],
				apply_id:'',
				fang:false,
				facility:[{id:1,name:'全部'},{id:2,name:'Mac'},{id:3,name:'Windows'},{id:4,name:'Android'}],
				todayItem:{},
				todayId:'',
				todayIndex:'',
				checkInfo:'',
                multipleSelection: [],
				checked:false,
				jobless:'',//201没工作
				jobTimeless:'',//202没填工作时间
				jobTimeSubit:'',//203没提交工作时间
				noAcceptance:'',//204没验收工作时间
				ConfirmLose:'',//205确认完成失败
				completed:'',//200已完成
				completedStatus:false,//完成工作的状态
				reviewData:[],//审核中数据
				delId:[],//多个ID的数据
				strId:''//id数组转字符
			}
		},
		methods: {
			jobStatus(){
				this.jobTimeStatus = !this.jobTimeStatus
			},
			finishJob(){//打开弹窗
				this.show = true
			},
			confirm(){//打开内层弹窗
				this.coreShow = true
			},
			confirmTask(){//完成任务跳转页面
				wx.navigateTo({url: '/pages/hots/hots'})
			},
			  handleCheckAllChange(val) {
			        this.isIndeterminate = false;
			      },
			    handleCheckedCitiesChange(index,items,id) {
					this.delId.push(id)
					this.strId = this.delId.join(",")
					console.log(this.strId)
					this.checked = !this.checked
					this.multipleSelection.push(items)
					this.todayId = id
					this.todayIndex = index
			      
			      
			    },
			clickTab(index,name){//工作时间
			   if(name == "全部"){
				   name = ''
				   }
				this.fang = true
				this.currents = index
				this.$http.post('/Work/LookWorkTime',{
					 apply_id:this.apply_id,
					work_device:name
					 }).then(res => {
					let resList = res.data.data.filter((item) => item.state == 1)
						this.LookWorkTime = resList
				})
			},
			tjsj(id){
				if(this.completedStatus){
					uni.showToast({icon: 'none',title: '工作已完成不能添加时间'});
				}else{
					wx.navigateTo({url: '/admin/admin_sj/admin_sj?id='+this.apply_id})
				}
				
			},
			undergoQuery() {//默认
				 this.$http.post('/Work/LookWork',{apply_id:this.apply_id}).then(res => {
					 this.LookWork = res.data.data
				})
			},
			undergo() {//查看工作时间
				 this.$http.post('/Work/LookWorkTime',{
					 apply_id:this.apply_id,
					 work_device:''
					 }).then(res => {
						let resData = res.data.data.filter((item) => item.state == 1)
							this.defaultData = resData
						let review = res.data.data.filter((item) => item.state != 1)
							this.reviewData = review
						 }) 
						 
						
				
			},
			delet(){//删除时间
			let newData = []
			let listId = this.strId.split(",")
				this.$http.post('/Work/deleteWorkTime',{id:this.strId}).then(res => {
					if(res.data.code == 1){
						for(let i=this.defaultData.length-1; i>=0; i--){
							for(let j=this.multipleSelection.length-1; j>=0; j--){
								if(this.defaultData[i].id === this.multipleSelection[j].id){
									this.defaultData.splice(i,1)
									this.delId = []
									this.lang[i] = false
								}
							}
						}
					// let arr = this.defaultData.concat(this.multipleSelection)	
					// this.defaultData = Array.from(new Set(arr))
					// console.log(this.defaultData)
						
					
						
						// this.defaultData.forEach((item,i) => {
						// 	if (selectArr.indexOf(i)>=0) {
						// 	     console.log(selectArr.indexOf(i))
						// 	}else{
						// 	    arr.push(this.defaultData[i])
						// 	 }
						// })
						// this.defaultData = arr;
						// this.selectArr = []
							
							
							// if(item.id == this.todayId){
							// 	this.defaultData.splice(i,1)
							// 	// window.location.reload();
							// 	// this.LookWork = ''
							// 	 this.lang[i] = false
							// }
					}
							
				})
				
			},
			sqjs(){//结算
				if(this.completedStatus){
					uni.showToast({icon: 'none',title: '工作已完成，不可再结算'});
				}else{
					if(this.checked){
						this.$http.post('/Work/saveWorkCheck',{
							work_id:this.strId,
							apply_id:this.apply_id
						}).then(res => {
							if(res.data.code == 1){
								uni.setStorage({key:'SettlementId',data:this.apply_id})
								uni.showToast({icon: 'none',title: '申请结算成功'});
								this.defaultData.forEach((item,i) => {
									if(item.id == this.todayId){
										this.defaultData.splice(i,1)
										// window.location.reload();
										// this.LookWork = ''
										 this.lang[i] = false
									}
								})
								window.location.reload();//刷新
							}
						})
					}else{
						uni.showToast({icon: 'none',title: '请先选择需要结算任务'})
					}
				}
			
				
			},
			querySilk(){//查看任务是否完成
				this.$http.post('/Work/confirmFinish',{apply_id:this.apply_id}).then(res => {
					if(res.data.code == 0){
						if(res.data.data.errcode == 201){
							this.jobless = res.data.msg
						}else if(res.data.data.errcode == 202){
							this.jobTimeless = res.data.msg
						}else if(res.data.data.errcode == 203){
							this.jobTimeSubit = res.data.msg
						}else if(res.data.data.errcode == 204){
							this.noAcceptance = res.data.msg
						}else if(res.data.data.errcode == 205){
							this.ConfirmLose = res.data.msg
						}else if(res.data.data.errcode == 206){
							this.completedStatus = true
							this.confirmButton = true
							this.completed = res.data.msg
						}
					}
				})
			}
			
		},
		onLoad(option) {
			this.apply_id = option.apply_id
			this.undergoQuery()
			this.undergo()
			this.querySilk()	
			
		},
		components:{
			Adminheader
		}
	}
</script>

<style lang="scss" scoped>
.sj{
	display: flex;
	justify-content: space-between;
	text-align: right;
	padding: 10px 20px;
	background: #FFFFFF;
	.scsj{
		color: #000;
		display: inline-block;
		.icon{margin-right: 3px;}
	}
	
}
.harder{
	background: #f6f8f9;
	padding-bottom: 100px;
	.log-list {
	    padding-bottom: 114px;
		line-height: 24px;
		.page-hd {
		    margin-top: 20px;
			line-height: 34px;
			.title {
			    font-size: 24px;
				font-weight: 700;
			}
			.meta {
			    margin-top: 10px;
			    line-height: 24px;
				.fl {
				    float: left;
				}
				li {
				    margin-right: 20px;
				    font-weight: 700;
					span {
					    color: #008bf7;
					    font-weight: 400;
					}
				}
				.finishJob{
					color: #008bf7;
					font-weight: bold;
					.checkmark{
						font-size: 16px;
						margin-right: 5px;
					}
				}
			}
		}
		.stat {
		    display: block;
		    margin: 20px 0 0;
			clear:both;
			.total {
			   display: flex;
			   justify-content: space-between;
				.item {
				    width: calc(50% - 10px);
				    height: 92px;
				    margin: 0;
					padding: 20px;
					box-sizing: border-box;
					background: #fff;
					border-radius: 2px;
					text-align: center;
					.num {
					    margin-top: 0;
						color: #008bf7;
						font-size: 18px;
						line-height: 28px;
						font-weight: 700;
					}
				}
			}
		}
		
	}
	.data-empty {
	    padding: 100px 0;
		text-align: center;
		background: #fff;
		img {
		    width: 120px;
		}
		p {
		    margin-top: 10px;
		}
	}
	.container {
	    padding: 20px 15px;
		box-sizing: border-box;
	}
	.log-list .stat .item {
	    width: 100%;
	    height: 146px;
	    margin: 10px 0 0;
	    padding: 20px;
		box-sizing: border-box;
		background: #fff;
		border-radius: 2px;
		text-align: center;
		.scale {
		    height: 10px;
		    margin-top: 12px;
		    border-radius: 10px;
		    overflow: hidden;
			li {
			    height: 10px;
			}
			.b-green {
			    background-color: #2ed573;
			}
			.fl {
			    float: left;
			}
			.b-yellow {
			    background-color: #fcb73a;
			}
			.b-red {
			    background-color: #ff5853;
			}
		}
		.numerical {
		    display: -ms-flexbox;
		    display: flex;
		    margin-top: 32px;
			li {
			    -ms-flex-positive: 1;
			    flex-grow: 1;
			}
			.fl {
			    float: left;
			}
			.num {
			    font-size: 18px;
			    line-height: 28px;
				font-weight: 700;
			}
			.t-green {
			    color: #2ed573;
			}
			.t-yellow {
			    color: #fcb73a;
			}
			.t-red {
			    color: #ff5853;
			}
		}
	}
}
.tabs {
    border-bottom: 1px solid #edf1f4;
    color: #9ca6ae;
	background: #fff;
	padding: 0 20px;
	.ul{
		display: flex;
		margin-bottom: -1px;
		justify-content: space-between;
		li{
			height: 44px;
			line-height: 44px;
			cursor: pointer;
			padding-bottom: 1px;	
		}
		 li.active {
		    padding-bottom: 0;
		    border-bottom: 1px solid #008bf7;
		    color: #008bf7;
		}
	}
}
.jsbutton{
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 70px;	
	text-align: center;
	background: #FFFFFF;
	    z-index: 1;
	border-top: 1px solid #edf1f4;
	button{
		width: 50%;
		margin-top: 15px;
		font-size: 14px;
		background: #008bf7;
		color: #FFFFFF;
	}
}
.admin_main{
	display:flex;
	align-items: center;
	padding: 20px;
	background: #FFFFFF;
	border-bottom: 1px solid #edf1f4;
	.check{
		margin-right: 20px;
		width: 10%;
	}
	.cens{
		width: 85%;
		display: inline-block;
		position: relative;
	}
	.details{
		display: flex;
		justify-content: space-between;
		.viewDetails{
			color: #008bf7;
		}
	},
	.jobTime{
		margin-top:10px;
		display:flex;
		justify-content: space-between;
	}
 }
/deep/ .u-model{
	height: 100vh;
}
/deep/ .u-border-top{
	position: absolute;
	    bottom: 0;
	    width: 100%;
}
/deep/ .hairline-left{
	color: #FFFFFF!important;
	background-color: #008bf7;
}
.modelContent{
	font-size: 18px;
	padding: 100px 20px;
	line-height: 30px;
	
}
.review{
	position: absolute;
	left: 115px;
	top: 0px;
	font-size: 12px;
	color: #FFFFFF;
	padding:2px 8px;
	border-radius: 10px;
	// bottom:0;
	// right: 0;
	// margin: auto;

}
.btns{
	background-color: rgb(100, 101, 102)!important;
	color: #FFFFFF!important;
}
.yelo{
	background-color: #FFD161;
	
}
.bule{
	background-color: #729DFF;
}
.green{
	background-color:#A6E22E;
}
.red{
	background-color:red;
}
</style>
